
{% extends "base.html" %}

{% block title %}设备管理 - 告警系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="fw-bold text-primary">设备管理</h1>
    <div>
        <button class="btn btn-outline-secondary" onclick="location.reload()">
            <i class="bi bi-arrow-clockwise"></i> 刷新
        </button>
    </div>
</div>

{% if device_heartbeat and device_heartbeat|length > 0 %}
    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="bg-primary text-white">
                    <tr> 
                        <th>IP</th>
                        <th>磁盘可用空间</th>
                        <th>内存使用率</th>    
                        <th>设备温度</th>
                        <th>运行状态</th>
                        <th class="text-center">在线状态</th>
                    </tr>
                </thead>
                <tbody id="deviceTableBody">
                    {% for heartbeat in device_heartbeat %}
                    <tr>
                        <td class="fw-medium">{{ heartbeat.BoardIp }}</td>
                        <td>{{ heartbeat.HostDiskAvailable }}</td>
                        <td>{{ heartbeat.HostMemory0 }}</td>
                        <td>{{ heartbeat.BoardTemp }}</td>
                        <td>{{ heartbeat.Key }}</td>
                        <td class="text-center">
                            {% if heartbeat.Status %}
                                <span class="badge bg-success">在线</span>
                            {% else %}
                                <span class="badge bg-danger">离线</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% else %}
    <div class="d-flex justify-content-center align-items-center" style="min-height: 400px;">
        <div class="alert alert-primary text-center p-5 rounded-3">
            <div class="mb-3">
                <i class="bi bi-info-circle fs-1 text-primary"></i>
            </div>
            <h4 class="fw-bold">暂无设备数据</h4>
            <p class="mt-2 text-muted">系统中没有记录的设备信息，请检查数据库连接或稍后再试。</p>
        </div>
    </div>
{% endif %}

<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 设置定时刷新，每5秒执行一次
    const refreshInterval = setInterval(fetchDeviceStatus, 5000);
    
    // 首次加载时立即执行一次
    fetchDeviceStatus();
    
    // 刷新函数
    async function fetchDeviceStatus() {
        try {
            const response = await fetch('/api/devicemanage');
            const data = await response.json();
            
            if (data.status === 'success') {
                updateDeviceTable(data.device_heartbeat);
            }
        } catch (error) {
            console.error('获取设备状态失败:', error);
            // 失败时不清除定时器，下次继续尝试
        }
    }
    
    // 更新表格内容
    function updateDeviceTable(devices) {
        const tbody = document.getElementById('deviceTableBody');
        if (!tbody) return;
        
        // 清空现有内容
        tbody.innerHTML = '';
        
        if (devices.length === 0) {
            // 显示无数据状态
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td colspan="4" class="text-center py-5">
                    <div class="alert alert-info mb-0">暂无设备数据</div>
                </td>
            `;
            tbody.appendChild(tr);
            return;
        }
        
        // 重新渲染表格行
        devices.forEach(heartbeat => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="ps-4 fw-medium">${heartbeat.BoardIp}</td>
                <td class="ps-4 fw-medium">${heartbeat.HostDiskAvailable}</td>
                <td class="ps-4 fw-medium">${heartbeat.HostMemory0}</td>
                <td class="ps-4 fw-medium">${heartbeat.BoardTemp}</td>
                <td>${heartbeat.Key || '-'}</td>
                <td class="text-center">
                    ${heartbeat.Status =='0' ? 
                        '<span class="badge bg-danger">离线</span>' : 
                        '<span class="badge bg-success">在线</span>'}
                </td>
            `;
            tbody.appendChild(tr);
        });
    }
});
</script>
{% endblock %}